import React from "react";
import "./badge.scss";

/**
 * @param value 显示值
 * @param max 最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。
 * @param is-dot 是否显示小圆点。
 * @param hidden 是否隐藏 Badge。
 * @param show-zero 值为零时是否显示 Badge
 * @param color 背景色
 * @param offset badge 的偏移量
 * @param badgeStyle 自定义 badge 样式
 * @param badgeClass 自定义 badge 类名
 */
interface Props {
    value?: string | number,
    max?: number,
    isDot?: boolean,
    hidden?: boolean
    showZero?: boolean,
    color?: string,
    offset?: [string, string],
    badgeStyle?: CSSStyleValue,
    badgeClass?: string,
    children?: React.ReactNode
}

const Badge = ({ value = "", max, isDot = false, hidden = false, showZero = false, color = "#ff0000", offset = ["50%", "-50%"], badgeStyle, badgeClass, children }: Props) => {
    const getValue = () => {
        if (typeof value === 'number' && typeof max === 'number' && value > max) {
            return `${max}+`
        }
        return value
    }

    return (
        <div className="pe-badge">
            {children}
            {
                !hidden && !(showZero && value === 0) ? (
                    isDot ? (
                        <div className="pr-badge-dot" style={{ backgroundColor: color }}></div>
                    ) : (
                        <div className={["pe-badge-cir", badgeClass].join(" ").trim()}
                            style={{...{ transform: `translate(${offset[0]}, ${offset[1]})`, backgroundColor: color }, ...badgeStyle}}
                            >{getValue()}</div>
                    )
                ) : null
            }
        </div>
    )
}

export default Badge